<!DOCTYPE html>
<!-- saved from url=(0051)https://www.cnblogs.com/dongcanliang/p/7054176.html -->
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="origin-when-crossorigin">
    <meta name="description" content="this 指向问题是入坑前端必须了解知识点，现在迎来了ES6时代，因为箭头函数的出现，所以感觉有必要对 this 问题梳理一下，遂有此文

在非箭头函数下， this 指向调用其所在函数的对象，而">
    <meta property="og:description" content="this 指向问题是入坑前端必须了解知识点，现在迎来了ES6时代，因为箭头函数的出现，所以感觉有必要对 this 问题梳理一下，遂有此文

在非箭头函数下， this 指向调用其所在函数的对象，而">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>this 指向详细解析（箭头函数） - Chris-dc - 博客园</title>
    <link id="favicon" rel="shortcut icon" href="https://common.cnblogs.com/favicon.svg" type="image/svg+xml">
    
    <link rel="stylesheet" href="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/blog-common.min.css">
    <link id="MainCss" rel="stylesheet" href="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/bundle-coffee.min.css">
    <link type="text/css" rel="stylesheet" href="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/cnblogs.css">
    <link type="text/css" rel="stylesheet" href="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/custom.css">
    <link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/bundle-coffee-mobile.min.css">
    
    <link type="application/rss+xml" rel="alternate" href="https://www.cnblogs.com/dongcanliang/rss">
    <link type="application/rsd+xml" rel="EditURI" href="https://www.cnblogs.com/dongcanliang/rsd.xml">
    <link type="application/wlwmanifest+xml" rel="wlwmanifest" href="https://www.cnblogs.com/dongcanliang/wlwmanifest.xml">
    <script src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/hm.js.下载"></script><script async="" src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/analytics.js.下载"></script><script>
        var currentBlogId = 232829;
        var currentBlogApp = 'dongcanliang';
        var cb_enable_mathjax = false;
        var isLogined = false;
        var isBlogOwner = false;
        var skinName = 'coffee';
        var visitorUserId = '';
        var hasCustomScript = true;
        try {
            if (hasCustomScript && document.referrer && document.referrer.indexOf('baidu.com') >= 0) {
                Object.defineProperty(document, 'referrer', { value: '' });
                Object.defineProperty(Document.prototype, 'referrer', { get: function(){ return ''; } });
            }
        } catch(error) { }
    </script>
        <script>
            var currentPostDateAdded = '2017-06-20 02:43';
        </script>
    <script src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/jquery-2.2.0.min.js.下载"></script>
    <script src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/blog-common.min.js.下载"></script><style type="text/css">.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}</style>
    
    
    
     <script type="text/javascript">
        window.codeHighlightEngine = 1
        window.enableCodeLineNumber = false
     </script>
</head>
<body class="skin-coffee has-navbar">
    <a name="top"></a>
    <div id="top_nav" class="navbar forpc">
        <nav id="nav_main" class="navbar-main">
            <ul id="nav_left" class="navbar-list navbar-left">
                <li class="navbar-branding"><a href="https://www.cnblogs.com/" title="开发者的网上家园"><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/logo.svg" alt="博客园Logo"></a></li>
                <li><a href="https://www.cnblogs.com/" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;skin-navbar-sitehome&#39;)">首页</a></li>
                <li><a href="https://news.cnblogs.com/" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;skin-navbar-news&#39;)">新闻</a></li>
                <li><a href="https://q.cnblogs.com/" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;skin-navbar-q&#39;)">博问</a></li>
                <li><a id="nav_brandzone" href="https://brands.cnblogs.com/" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;skin-navbar-brands&#39;)">专区</a></li>
                <li><a href="https://ing.cnblogs.com/" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;skin-navbar-ing&#39;)">闪存</a></li>
                <li><a href="https://edu.cnblogs.com/" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;skin-navbar-edu&#39;)">班级</a></li>
            </ul>
            <ul id="nav_right" class="navbar-list navbar-right">
                <li>
                    <form id="zzk_search" class="navbar-search" action="https://zzk.cnblogs.com/s" method="get">
                        <input name="w" id="zzk_search_input" placeholder="代码改变世界" type="text" tabindex="3">
                        <button type="submit" id="zzk_search_button">
                            <img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/search.svg" alt="搜索">
                        </button>
                    </form>
                </li>
                <li id="navbar_login_status" class="navbar-list">
                    <a class="navbar-user-info navbar-blog" href="https://i.cnblogs.com/EditPosts.aspx?opt=1" alt="写随笔" title="写随笔" style="display: none;">
                        <img id="new_post_icon" class="navbar-icon" src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/newpost.svg" alt="写随笔">
                    </a>
                    <a id="navblog-myblog-icon" class="navbar-user-info navbar-blog" href="https://passport.cnblogs.com/GetBlogApplyStatus.aspx" alt="我的博客" title="我的博客" style="display: none;">
                        <img id="myblog_icon" class="navbar-icon" src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/myblog.svg" alt="我的博客">
                    </a>
                    <a class="navbar-user-info navbar-message navbar-icon-wrapper" href="https://msg.cnblogs.com/" alt="短消息" title="短消息" style="display: none;">
                        <img id="msg_icon" class="navbar-icon" src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/message.svg" alt="短消息">
                        <span id="msg_count" style="display: none"></span>
                    </a>
                    <div id="user_info" class="navbar-user-info dropdown" style="display: none;">
                        <a class="dropdown-button" href="https://home.cnblogs.com/">
                            <img id="user_icon" class="navbar-avatar" src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/avatar-default.svg" alt="用户头像">
                        </a>
                        <div class="dropdown-menu">
                            <a id="navblog-myblog-text" href="https://passport.cnblogs.com/GetBlogApplyStatus.aspx">我的博客</a>
                            <a href="https://home.cnblogs.com/">我的园子</a>
                            <a href="https://account.cnblogs.com/settings/account">账号设置</a>
                            <a href="javascript:void(0)" id="navbar_lite_mode_toggle" title="简洁模式会使用简洁款皮肤显示所有博客">
    简洁模式 <img id="navbar_lite_mode_on" src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/lite-mode-check.svg" class="hide"><span id="navbar_lite_mode_spinner" class="hide">...</span>
</a>
                            <a href="javascript:void(0)" onclick="account.logout();">退出登录</a>
                        </div>
                    </div>
                    <a class="navbar-anonymous" href="https://account.cnblogs.com/signup/" style="display: inline;">注册</a>
                    <a class="navbar-anonymous" href="javascript:void(0);" onclick="account.login()" style="display: inline;">登录</a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="page_begin_html">
        <a href="https://github.com/dclcats"><img style="position: absolute; top: 0; right: 0; border: 0;" src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
    </div>
    
<!--done-->
<div id="home">
<div id="header">
	<div id="blogTitle">
	<a href="https://www.cnblogs.com/dongcanliang/"><img id="blogLogo" src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/logo.gif" alt="返回主页"></a>			
		
<!--done-->
<h1><a id="Header1_HeaderTitle" class="headermaintitle HeaderMainTitle" href="https://www.cnblogs.com/dongcanliang/">Chris</a>
</h1>
<h2></h2>




		
	</div><!--end: blogTitle 博客的标题和副标题 -->
</div><!--end: header 头部 -->

<div id="main">
	<div id="mainContent">
	<div class="forFlow">
		<div id="navigator">
			
<ul id="navList">
	<li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">
博客园</a>
</li>
	<li>
<a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/dongcanliang/">
首页</a>
</li>
	<li>

<a id="blog_nav_newpost" class="menu" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">
新随笔</a>
</li>
	<li>
<a id="blog_nav_contact" class="menu" href="https://msg.cnblogs.com/send/Chris-dc">
联系</a></li>
	<li>
<a id="blog_nav_admin" class="menu" href="https://i.cnblogs.com/">
管理</a>
</li>
	<li>
<a id="blog_nav_rss" class="menu" href="javascript:void(0)" data-rss="https://www.cnblogs.com/dongcanliang/rss/">
订阅</a>
	
<a id="blog_nav_rss_image" href="https://www.cnblogs.com/dongcanliang/rss/">
    <img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/xml.gif" alt="订阅">
</a></li>
</ul>



			<div class="blogStats">
				
				<!--done-->
随笔- 22&nbsp;
文章- 0&nbsp;
评论- 13&nbsp;
阅读- 
<span title="总阅读数: 151139">
15万</span>&nbsp;



				
			</div><!--end: blogStats -->
		</div><!--end: navigator 博客导航栏 -->
		<div id="post_detail">
<!--done-->
<div id="topics">
	<div class="post">
		<h1 class="postTitle">
			
<a id="cb_post_title_url" class="postTitle2 vertical-middle" href="https://www.cnblogs.com/dongcanliang/p/7054176.html">
    <span>this 指向详细解析（箭头函数）</span>
    



</a>

		</h1>
		<div class="clear"></div>
		<div class="postBody">
			    <div id="cnblogs_post_description" style="display: none">
        
        this 指向问题是入坑前端必须了解知识点，现在迎来了ES6时代，因为箭头函数的出现，所以感觉有必要对 this 问题梳理一下，遂有此文

在非箭头函数下， this 指向调用其所在函数的对象，而且是离谁近就是指向谁（此对于常规对象，原型链， getter &amp; setter等都适用）；构造函数下，this与被创建的新对象绑定；DOM事件，this指向触发事件的元素；内联事件分两种情况，bind绑定， call &amp; apply 方法等， 容以下一步一步讨论。箭头函数也会穿插其中进行讨论。
    </div>
<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
<p>本文地址：<a href="http://www.cnblogs.com/dongcanliang/p/7054176.html" target="_blank">http://www.cnblogs.com/dongcanliang/p/7054176.html</a></p>
<h2 id="前言">前言</h2>
<p>this 指向问题是入坑前端必须了解知识点，现在迎来了ES6时代，因为箭头函数的出现，所以感觉有必要对 this 问题梳理一下，遂有此文</p>
<p>在非箭头函数下， this 指向调用其所在函数的对象，而且是离谁近就是指向谁（此对于常规对象，原型链， getter &amp; setter等都适用）；构造函数下，this与被创建的新对象绑定；DOM事件，this指向触发事件的元素；内联事件分两种情况，bind绑定， call &amp; apply 方法等， 容以下一步一步讨论。箭头函数也会穿插其中进行讨论。</p>
<h2 id="全局环境下">全局环境下</h2>
<p>在全局环境下，this 始终指向全局对象（window）, 无论是否严格模式；</p>
<pre><code class="language-stylus?linenums">console.log(this.document === document); // true

// 在浏览器中，全局对象为 window 对象：
console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37
</code></pre>
<h2 id="函数上下文调用">函数上下文调用</h2>
<h3 id="函数直接调用">函数直接调用</h3>
<p>普通函数内部的this分两种情况，严格模式和非严格模式。</p>
<p>非严格模式下，this 默认指向全局对象window</p>
<pre><code class="language-stylus?linenums">function f1(){
  return this;
}

f1() === window; // true
</code></pre>
<p>而严格模式下， this为undefined</p>
<pre><code class="language-stylus?linenums">function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true
</code></pre>
<h3 id="对象中的this">对象中的this</h3>
<p>对象内部方法的this指向调用这些方法的对象，</p>
<ol>
<li>函数的定义位置不影响其this指向，this指向只和调用函数的对象有关。</li>
<li>多层嵌套的对象，内部方法的this指向离被调用函数最近的对象（window也是对象，其内部对象调用方法的this指向内部对象， 而非window）。</li>
</ol>
<pre><code class="language-stylus?linenums">//1
var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};
console.log(o.f());  //37
var a = o.f;
console.log(a()):  //undefined

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37

//2
o.b = {
  g: independent,
  prop: 42
};
console.log(o.b.g()); // logs 42
</code></pre>
<h4 id="原型链中this">原型链中this</h4>
<p>原型链中的方法的this仍然指向调用它的对象，与以上讨论一致；看个例子，</p>
<pre><code class="language-stylus?linenums">var o = {
  f : function(){ 
    return this.a + this.b; 
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5
</code></pre>
<p>可以看出， 在p中没有属性f，当执行p.f()时，会查找p的原型链，找到 f 函数并执行，但这与函数内部this指向对象 p 没有任何关系，只需记住谁调用指向谁。</p>
<p>以上对于函数作为getter &amp; setter 调用时同样适用。</p>
<h3 id="构造函数中this">构造函数中this</h3>
<p>构造函数中的this与被创建的新对象绑定。</p>
<p>注意：当构造器返回的默认值是一个this引用的对象时，可以手动设置返回其他的对象，如果返回值不是一个对象，返回this。</p>
<pre><code class="language-stylus?linenums">function C(){
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37


function C2(){
  this.a = 37;
  return {a:38};
}

var b = new C2();
console.log(b.a); // logs 38
</code></pre>
<p>以上两个例子内部的this都指向对象o, 看到这里的你不妨在控制台执行下以上代码，看看对象 o 和 b ，这些是属于构造函数的内容了，此处不多做介绍。（C2函数中的this.a = 37 对整个过程完全没有影响的， 可以被忽略的）。</p>
<h3 id="call--apply">call &amp; apply</h3>
<p>当函数通过Function对象的原型中继承的方法 call() 和 apply() 方法调用时， 其函数内部的this值可绑定到 call() &amp; apply() 方法指定的第一个对象上， 如果第一个参数不是对象，JavaScript内部会尝试将其转换成对象然后指向它。</p>
<p>例子：</p>
<pre><code class="language-stylus?linenums">function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

function tt() {
  console.log(this);
}
// 返回对象见下图（图1）
tt.call(5);  // Number {[[PrimitiveValue]]: 5} 
tt.call('asd'); // String {0: "a", 1: "s", 2: "d", length: 3, [[PrimitiveValue]]: "asd"}
</code></pre>
<p><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/777834-20170620144423820-371299881.jpg" alt="" loading="lazy"></p>
<h3 id="bind-方法">bind 方法</h3>
<p>bind方法在ES5引入， 在Function的原型链上， <code>Function.prototype.bind</code>。通过bind方法绑定后， 函数将被永远绑定在其第一个参数对象上， 而无论其在什么情况下被调用。</p>
<pre><code class="language-stylus?linenums">function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty
</code></pre>
<h3 id="dom-事件处理函数中的-this--内联事件中的-this">DOM 事件处理函数中的 this &amp; 内联事件中的 this</h3>
<p><strong>DOM事件处理函数</strong></p>
<ol>
<li>当函数被当做监听事件处理函数时， 其 this 指向触发该事件的元素 （针对于addEventListener事件）</li>
</ol>
<pre><code class="language-stylus?linenums">  // 被调用时，将关联的元素变成蓝色
	function bluify(e){
	  //在控制台打印出所点击元素
	  console.log(this);
	  //阻止时间冒泡
	  e.stopPropagation();
	  //阻止元素的默认事件
	  e.preventDefault();      
	  this.style.backgroundColor = '#A5D9F3';
	}

	// 获取文档中的所有元素的列表
	var elements = document.getElementsByTagName('*');

	// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
	for(var i=0 ; i&lt;elements.length ; i++){
	  elements[i].addEventListener('click', bluify, false);
	}

</code></pre>
<p>以上代码建议在网页中执行以下，看下效果。</p>
<p><strong>内联事件</strong><br>
内联事件中的this指向分两种情况：</p>
<ol>
<li>当代码被内联处理函数调用时，它的this指向监听器所在的DOM元素</li>
<li>当代码被包括在函数内部执行时，其this指向等同于 <strong><strong>函数直接调用</strong></strong>的情况，即在非严格模式指向全局对象window， 在严格模式指向undefined</li>
</ol>
<p><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/777834-20170620144449757-948944211.jpg" alt="" loading="lazy" class="medium-zoom-image"></p>
<p>页面的代码块</p>
<p><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/777834-20170620144504413-1120828849.jpg" alt="" loading="lazy"></p>
<p>在浏览器内显示三个按钮</p>
<p><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/777834-20170620144511679-451778615.jpg" alt="" loading="lazy"></p>
<p>依次点击上边的三个按钮后在控制台的输出结果，</p>
<p>建议自己操作一遍以便于更好的理解。</p>
<h3 id="settimeout--setinterval">setTimeout &amp; setInterval</h3>
<p>对于延时函数内部的回调函数的this指向全局对象window（当然我们可以通过bind方法改变其内部函数的this指向）<br>
看下边代码及截图</p>
<pre><code class="language-stylus?linenums">//默认情况下代码
function Person() {  
    this.age = 0;  
    setTimeout(function() {
        console.log(this);
    }, 3000);
}

var p = new Person();//3秒后返回 window 对象
==============================================
//通过bind绑定
function Person() {  
    this.age = 0;  
    setTimeout((function() {
        console.log(this);
    }).bind(this), 3000);
}

var p = new Person();//3秒后返回构造函数新生成的对象 Person{...}
</code></pre>
<p><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/777834-20170620144527554-990414883.jpg" alt="" loading="lazy"></p>
<p><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/777834-20170620144536820-1525099793.jpg" alt="" loading="lazy"></p>
<h2 id="箭头函数中的-this">箭头函数中的 this</h2>
<p>由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值，</p>
<ol>
<li>所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响。</li>
<li>考虑到 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。（可以忽略是否在严格模式下的影响）</li>
</ol>
<p>因为箭头函数可以捕获其所在上下文的this值 所以</p>
<pre><code class="language-stylus?linenums">function Person() {  
    this.age = 0;  
    setInterval(() =&gt; {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
    }, 3000);
}

var p = new Person();
</code></pre>
<p>以上代码可以得到我们所以希望的值，下图可以看到，在setTimeout中的this指向了构造函数新生成的对象，而普通函数指向了全局window对象</p>
<p><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/777834-20170620144556179-936108349.jpg" alt="" loading="lazy"></p>
<pre><code class="language-stylus?linenums">var adder = {
  base : 1,
    
  add : function(a) {
    var f = v =&gt; v + this.base;
    return f(a);
  },

  addThruCall: function inFun(a) {
    var f = v =&gt; v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3，其内部的this并没有因为call() 而改变，其this值仍然为函数inFun的this值，指向对象adder
</code></pre>
<p>bind() &amp; apply() 读者可以自行测试</p>
<p>对于是否严格模式示例代码（可以复制进控制台进行验证）</p>
<pre><code class="language-stylus?linenums">var f = () =&gt; {'use strict'; return this};
var p = () =&gt; { return this};
console.log(1,f() === window);
console.log(2,f() === p());
//1 true
//2 true
</code></pre>
<p><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/777834-20170620144613820-1277977431.jpg" alt="" loading="lazy"></p>
<p>以上的箭头函数都是在方法内部，总之都是以非方法的方式使用，如果将箭头函数当做一个方法使用会怎样呢？<br>
上例子</p>
<pre><code class="language-stylus?linenums">var obj = {
  i: 10,
  b: () =&gt; console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();  // undefined window{...}
obj.c();  // 10 Object {...}
</code></pre>
<p><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/777834-20170620144630663-1545275969.jpg" alt="" loading="lazy"></p>
<p>可以看到，作为方法的箭头函数this指向全局window对象，而普通函数则指向调用它的对象</p>
<p>以上为个人学习整理内容， 文中例子参考MDN， 欢迎交流学习</p>
<h2 id="参考文献">参考文献</h2>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E4%B8%AD%E7%9A%84_this" target="_blank">this - JavaScript | MDN</a><br>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arrow_functions#%E5%83%8F%E6%96%B9%E6%B3%95%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0" target="_blank">箭头函数 - JavaScript | MDN</a></p>

</div>
<div id="MySignature">
    如需转载请注明出处。
</div>
<div class="clear"></div>
<div id="blog_post_info_block"><div id="BlogPostCategory">
    分类: 
            <a href="https://www.cnblogs.com/dongcanliang/category/704651.html" target="_blank">JavaScript</a></div>
<div id="EntryTag">
    标签: 
            <a href="https://www.cnblogs.com/dongcanliang/tag/front-end/">front-end</a>,             <a href="https://www.cnblogs.com/dongcanliang/tag/JavaScript/">JavaScript</a>,             <a href="https://www.cnblogs.com/dongcanliang/tag/this%E6%8C%87%E5%90%91/">this指向</a>,             <a href="https://www.cnblogs.com/dongcanliang/tag/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">箭头函数</a></div>

    <div id="blog_post_info">
<div id="green_channel">
        <a href="javascript:void(0);" id="green_channel_digg" onclick="DiggIt(7054176,cb_blogId,1);green_channel_success(this,&#39;谢谢推荐！&#39;);">好文要顶</a>
        <a id="green_channel_follow" onclick="follow(&#39;625f7e22-5f1a-e511-b908-9dcfd8948a71&#39;);" href="javascript:void(0);">关注我</a>
    <a id="green_channel_favorite" onclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏该文</a>
    <a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" onclick="ShareToTsina()"><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/icon_weibo_24.png" alt=""></a>
    <a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" onclick="shareOnWechat()"><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/wechat.png" alt=""></a>
</div>
<div id="author_profile">
    <div id="author_profile_info" class="author_profile_info">
            <a href="https://home.cnblogs.com/u/dongcanliang/" target="_blank"><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/20170425140741.png" class="author_avatar" alt=""></a>
        <div id="author_profile_detail" class="author_profile_info">
            <a href="https://home.cnblogs.com/u/dongcanliang/">Chris-dc</a><br>
            <a href="https://home.cnblogs.com/u/dongcanliang/followees/">关注 - 3</a><br>
            <a href="https://home.cnblogs.com/u/dongcanliang/followers/">粉丝 - 12</a>
        </div>
    </div>
    <div class="clear"></div>
    <div id="author_profile_honor"></div>
    <div id="author_profile_follow">
                <a href="javascript:void(0);" onclick="follow(&#39;625f7e22-5f1a-e511-b908-9dcfd8948a71&#39;);return false;">+加关注</a>
    </div>
</div>
<div id="div_digg">
    <div class="diggit" onclick="votePost(7054176,&#39;Digg&#39;)">
        <span class="diggnum" id="digg_count">24</span>
    </div>
    <div class="buryit" onclick="votePost(7054176,&#39;Bury&#39;)">
        <span class="burynum" id="bury_count">0</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips">
    </div>
</div>

<script type="text/javascript">
    currentDiggType = 0;
</script></div>
    <div class="clear"></div>
    <div id="post_next_prev">

    <a href="https://www.cnblogs.com/dongcanliang/p/6840139.html" class="p_n_p_prefix">« </a> 上一篇：    <a href="https://www.cnblogs.com/dongcanliang/p/6840139.html" title="发布于 2017-05-11 11:38">安卓下微信内置浏览器视频出现解析错误</a>
    <br>
    <a href="https://www.cnblogs.com/dongcanliang/p/7307059.html" class="p_n_p_prefix">» </a> 下一篇：    <a href="https://www.cnblogs.com/dongcanliang/p/7307059.html" title="发布于 2017-08-08 15:24">移动端实现拖动操作</a>

</div>
</div>
		</div>
		<div class="postDesc">posted @ 
<span id="post-date">2017-06-20 14:43</span>&nbsp;
<a href="https://www.cnblogs.com/dongcanliang/">Chris-dc</a>&nbsp;
阅读(<span id="post_view_count">79118</span>)&nbsp;
评论(<span id="post_comment_count">5</span>)&nbsp;
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=7054176" rel="nofollow">编辑</a>&nbsp;
<a href="javascript:void(0)" onclick="AddToWz(7054176);return false;">收藏</a>&nbsp;
<a href="javascript:void(0)" onclick="reportManager.report({ currentUserId: &#39;&#39;, targetType: &#39;blogPost&#39;, targetId: &#39;7054176&#39;, targetLink: &#39;https://www.cnblogs.com/dongcanliang/p/7054176.html&#39;, title: &#39;this 指向详细解析（箭头函数）&#39; })">举报</a></div>
	</div>
	
	
</div><!--end: topics 文章、评论容器-->

<script src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/highlight.min.js.下载" async="" onload="markdown_highlight()"></script>
<script>
    var allowComments = true, cb_blogId = 232829, cb_blogApp = 'dongcanliang', cb_blogUserGuid = '625f7e22-5f1a-e511-b908-9dcfd8948a71';
    var cb_entryId = 7054176, cb_entryCreatedDate = '2017-06-20 14:43', cb_postType = 1;
    updatePostStats(
        [cb_entryId],
        function(id, count) { $("#post_view_count").text(count) },
        function(id, count) { $("#post_comment_count").text(count) })
    zoomManager.apply("#cnblogs_post_body img:not(.code_img_closed):not(.code_img_opened)");
</script>

<a name="!comments"></a>
<div id="blog-comments-placeholder"></div>
<div id="comment_form" class="commentform">
    <a name="commentform"></a>
    <div id="divCommentShow"></div>
    <div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">刷新评论</a><a href="https://www.cnblogs.com/dongcanliang/p/7054176.html#" onclick="return RefreshPage();">刷新页面</a><a href="https://www.cnblogs.com/dongcanliang/p/7054176.html#top">返回顶部</a></div>
    <div id="comment_form_container" style="visibility: visible;"><div class="login_tips">
    登录后才能查看或发表评论，立即 <a rel="nofollow" href="javascript:void(0);" class="underline" onclick="return account.login(&#39;!comments&#39;);">登录</a> 或者
    <a href="https://www.cnblogs.com/">逛逛</a> 博客园首页
</div>
</div>
    <div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
    <div id="ad_t2"><a href="https://cloud.baidu.com/campaign/2021autdiscount/index.html?track=cp:bokeyuan|pf:pc|pp:bokeyuan-huodong-21puhuishangyun-neiyewenzilian|pu:21puhuishangyun-neiyewenzilian|ci:21phsy|kw:10305382" target="_blank" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;T2-百度云-普惠上云节&#39;)">【推荐】百度智能云2021普惠上云节：新用户首购云服务器低至0.7折</a><br><a href="https://www.aliyun.com/minisite/goods?taskCode=yds2021-07zy&amp;recordId=807539&amp;userCode=swh7dvlt" target="_blank" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;T2-阿里云-cps&#39;)">【推荐】阿里云云大使特惠：新用户购ECS服务器1核2G最低价87元/年</a><br><a href="http://www.uccpsoft.com/index.htm" target="_blank" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;T2-ucancode&#39;)">【推荐】大型组态、工控、仿真、CAD\GIS 50万行VC++源码免费下载!</a><br><a href="https://www.cnblogs.com/cmt/p/15147135.html" target="_blank" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;T2-众安保险&#39;)">【推广】园子与爱卡汽车爱宝险合作，随手就可以买一份的百万医疗保险</a><br></div>
    <div id="opt_under_post"></div>
    <div id="cnblogs_c1" class="under-post-card">
             <a onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Link&#39;, &#39;click&#39;, &#39;Pangle-C1&#39;)" target="_blank" rel="nofollow" href="https://c.gridsumdissector.com/r/?gid=gad_545_ph4hkwzt&amp;ck=32&amp;adk=442&amp;autorefresh=__AUTOREFRESH__">
                <img style="width: 300px; height: 250px;" src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/35695-20210817131346802-930113090.jpg" alt="" onload="gscmdImpress()">
             </a>
    </div>
    <div id="under_post_card1"><div class="under-post-card">
<b>编辑推荐：</b>
<br>

· <a href="https://www.cnblogs.com/dino623/p/building_MVVM_programs_using_MVVM_Toolkit.html" target="_blank">[WPF] 使用 MVVM Toolkit 构建 MVVM 程序</a>
    <br>
· <a href="https://www.cnblogs.com/Soar1991/p/15165595.html" target="_blank">使用 C# 下载文件的十八般武艺</a>
    <br>
· <a href="https://www.cnblogs.com/fedtop/p/15157513.html" target="_blank">我用 10000 张图片合成我们美好的瞬间</a>
    <br>
· <a href="https://www.cnblogs.com/myshowtime/p/15145988.html" target="_blank">一文读懂哈希和一致性哈希算法</a>
    <br>
· <a href="https://www.cnblogs.com/PerkinsZhu/p/15154059.html" target="_blank">DDD领域驱动及落地方案</a>
    <br>
</div></div>
    <div id="under_post_card2"><div class="itnews under-post-card">
    <b>最新新闻</b>：
    <br>
 ·          <a href="https://news.cnblogs.com/n/700767/" target="_blank">TCL电子联席首席执行官吴吉宇辞任（2021-08-23 15:06）</a>
        <br>
 ·          <a href="https://news.cnblogs.com/n/700766/" target="_blank">“小鹿中医”并入阿里健康（2021-08-23 14:59）</a>
        <br>
 ·          <a href="https://news.cnblogs.com/n/700765/" target="_blank">“华米OV”变“荣米OV”，谁能扛起国产高端机的大旗？（2021-08-23 14:57）</a>
        <br>
 ·          <a href="https://news.cnblogs.com/n/700764/" target="_blank">苹果 Google 微软等科技巨头，为什么都积极布局 “碳中和” ？（2021-08-23 14:46）</a>
        <br>
 ·          <a href="https://news.cnblogs.com/n/700763/" target="_blank">上海交大、MIT团队联合研发新型智能假手，仅约292克（2021-08-23 14:26）</a>
        <br>
    » <a href="https://news.cnblogs.com/" title="IT 新闻" target="_blank">更多新闻...</a>
</div></div>
    <div id="HistoryToday" class="under-post-card"></div>
    <script type="text/javascript">
       var commentManager = new blogCommentManager();
       commentManager.renderComments(0);
       fixPostBody();
       deliverBigBanner();
setTimeout(function() { incrementViewCount(cb_entryId); }, 50);       deliverT2();
       deliverC1C2();
       loadNewsAndKb();
LoadPostCategoriesTags(cb_blogId, cb_entryId);       LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
       GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);
       loadOptUnderPost();
       GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);
    </script>
</div>

</div>


	</div><!--end: forFlow -->
	</div><!--end: mainContent 主体内容容器-->

	<div id="sideBar">
		<div id="sideBarMain">
			<div id="sidebar_news" class="newsItem"><!--done-->
<div class="newsItem">
<h3 class="catListTitle">公告</h3>
	
<div id="blog-news">
    <script type="text/javascript">window['__document_write_ajax_callbacks__']['3']();</script><script>window['__document_write_ajax_callbacks__']['1']();</script>
<div id="profile_block" class="dc-sidebar"><a href="https://github.com/dclcats/" target="_blank" style="display:inline-block;width:50%;"><img src="./this 指向详细解析（箭头函数） - Chris-dc - 博客园_files/fluidicon.png" width="16px" style="vertical-align: middle;margin: -5px 6px 0 0;">GitHub</a><a href="http://www.jianshu.com/u/c0952c41735c" target="_blank" style="display:inline-block;width:50%;"><img src="" width="16px" style=" width: 15px;vertical-align: middle;margin: -2px 6px 0 0;">简书</a></div>
    <div id="profile_block">
        昵称：
        <a href="https://home.cnblogs.com/u/dongcanliang/">
            Chris-dc
        </a>
        <br>
        园龄：
        <a href="https://home.cnblogs.com/u/dongcanliang/" title="入园时间：2015-06-24">
            6年1个月
        </a>
        <br>
        粉丝：
        <a href="https://home.cnblogs.com/u/dongcanliang/followers/">
            12
        </a>
        <br>
        关注：
        <a href="https://home.cnblogs.com/u/dongcanliang/followees/">
            3
        </a>
        <div id="p_b_follow">
<a href="javascript:void(0)" onclick="follow(&#39;625f7e22-5f1a-e511-b908-9dcfd8948a71&#39;)">+加关注</a></div>
        <script type="text/javascript">window['__document_write_ajax_callbacks__']['4']();</script><script>window['__document_write_ajax_callbacks__']['2']();</script>
    </div>
</div>
</div>

</div>
<div id="sidebar_c3"></div>
			<div id="calendar"><div id="blog-calendar" style="">

<table id="blogCalendar" class="Cal" cellspacing="0" cellpadding="0" title="Calendar" border="0">
    <tbody>
        <tr>
            <td colspan="7">
                <table class="CalTitle" cellspacing="0" border="0">
                    <tbody>
                        <tr>
                            <td class="CalNextPrev">
                                <a href="javascript:void(0);" onclick="loadBlogCalendar(&#39;2021/07/23&#39;); return false;">&lt;</a>
                            </td>
                            <td align="center">2021年8月</td>
                            <td align="right" class="CalNextPrev">
                                <a href="javascript:void(0);" onclick="loadBlogCalendar(&#39;2021/09/23&#39;); return false;">&gt;</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    <tr>
        <th class="CalDayHeader" align="center" abbr="日" scope="col">日</th>
        <th class="CalDayHeader" align="center" abbr="一" scope="col">一</th>
        <th class="CalDayHeader" align="center" abbr="二" scope="col">二</th>
        <th class="CalDayHeader" align="center" abbr="三" scope="col">三</th>
        <th class="CalDayHeader" align="center" abbr="四" scope="col">四</th>
        <th class="CalDayHeader" align="center" abbr="五" scope="col">五</th>
        <th class="CalDayHeader" align="center" abbr="六" scope="col">六</th>
    </tr>
            <tr>
                        <td class="CalWeekendDay" align="center">
                            1
                        </td>
                        <td class="" align="center">
                            2
                        </td>
                        <td class="" align="center">
                            3
                        </td>
                        <td class="" align="center">
                            4
                        </td>
                        <td class="" align="center">
                            5
                        </td>
                        <td class="" align="center">
                            6
                        </td>
                    <td class="CalWeekendDay" align="center">
                        7
                    </td>
            </tr>
                <tr>
                        <td class="CalWeekendDay" align="center">
                            8
                        </td>
                            <td class="" align="center">
                                9
                            </td>
                            <td class="" align="center">
                                10
                            </td>
                            <td class="" align="center">
                                11
                            </td>
                            <td class="" align="center">
                                12
                            </td>
                            <td class="" align="center">
                                13
                            </td>
                        <td class="CalWeekendDay" align="center">
                            14
                        </td>
                </tr>
                <tr>
                        <td class="CalWeekendDay" align="center">
                            15
                        </td>
                            <td class="" align="center">
                                16
                            </td>
                            <td class="" align="center">
                                17
                            </td>
                            <td class="" align="center">
                                18
                            </td>
                            <td class="" align="center">
                                19
                            </td>
                            <td class="" align="center">
                                20
                            </td>
                        <td class="CalWeekendDay" align="center">
                            21
                        </td>
                </tr>
                <tr>
                        <td class="CalWeekendDay" align="center">
                            22
                        </td>
                            <td class="CalTodayDay" align="center">
                                23
                            </td>
                            <td class="" align="center">
                                24
                            </td>
                            <td class="" align="center">
                                25
                            </td>
                            <td class="" align="center">
                                26
                            </td>
                            <td class="" align="center">
                                27
                            </td>
                        <td class="CalWeekendDay" align="center">
                            28
                        </td>
                </tr>
                <tr>
                        <td class="CalWeekendDay" align="center">
                            29
                        </td>
                            <td class="" align="center">
                                30
                            </td>
                            <td class="" align="center">
                                31
                            </td>
                            <td class="CalOtherMonthDay" align="center">
                                1
                            </td>
                            <td class="CalOtherMonthDay" align="center">
                                2
                            </td>
                            <td class="CalOtherMonthDay" align="center">
                                3
                            </td>
                        <td class="CalOtherMonthDay" align="center">
                            4
                        </td>
                </tr>
                <tr>
                        <td class="CalOtherMonthDay" align="center">
                            5
                        </td>
                            <td class="CalOtherMonthDay" align="center">
                                6
                            </td>
                            <td class="CalOtherMonthDay" align="center">
                                7
                            </td>
                            <td class="CalOtherMonthDay" align="center">
                                8
                            </td>
                            <td class="CalOtherMonthDay" align="center">
                                9
                            </td>
                            <td class="CalOtherMonthDay" align="center">
                                10
                            </td>
                        <td class="CalOtherMonthDay" align="center">
                            11
                        </td>
                </tr>
    </tbody>
</table></div><script>loadBlogDefaultCalendar();</script></div>
			
			<div id="leftcontentcontainer">
				<div id="blog-sidecolumn"><!-- 搜索 -->
<div id="sidebar_search" class="sidebar-block">
    <div id="sidebar_search" class="mySearch">
        <h3 class="catListTitle">搜索</h3>
        <div id="sidebar_search_box">
            <div id="widget_my_zzk" class="div_my_zzk">
                <input type="text" id="q" onkeydown="return zzk_go_enter(event);" class="input_my_zzk">&nbsp;<input onclick="zzk_go()" type="button" value="找找看" id="btnZzk" class="btn_my_zzk">
            </div>
            <div id="widget_my_google" class="div_my_zzk">
                <input type="text" name="google_q" id="google_q" onkeydown="return google_go_enter(event);" class="input_my_zzk">&nbsp;<input onclick="google_go()" type="button" value="谷歌搜索" class="btn_my_zzk">
            </div>
        </div>
    </div>
</div>

<!-- 常用链接 -->
<div id="sidebar_shortcut" class="sidebar-block"><div class="catListLink">
<h3 class="catListTitle">
常用链接
</h3>
<ul>
    
<li><a href="https://www.cnblogs.com/dongcanliang/p/" title="我的博客的随笔列表">我的随笔</a></li>
<li><a href="https://www.cnblogs.com/dongcanliang/MyComments.html" title="我的发表过的评论列表">我的评论</a></li>
<li><a href="https://www.cnblogs.com/dongcanliang/OtherPosts.html" title="我评论过的随笔列表">我的参与</a></li>
<li><a href="https://www.cnblogs.com/dongcanliang/RecentComments.html" title="我的博客的评论列表">最新评论</a></li>
<li><a href="https://www.cnblogs.com/dongcanliang/tag/" title="我的博客的标签列表">我的标签</a></li>

    <li><a id="itemListLink" onclick="this.blur();WarpClass(&#39;itemListLink&#39;, &#39;itemListLin_con&#39;);return false;" href="https://www.cnblogs.com/dongcanliang/p/7054176.html#">更多链接</a></li>
</ul>
</div>

</div>

<!-- 最新随笔 -->


<!-- 我的标签 -->
<div id="sidebar_toptags" class="sidebar-block"><div class="catListTag">
<h3 class="catListTitle">我的标签</h3>
<ul>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/JavaScript/">JavaScript<span class="tag-count">(10)</span></a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/front-end/">front-end<span class="tag-count">(4)</span></a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/web/">web<span class="tag-count">(2)</span></a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/vue/">vue<span class="tag-count">(2)</span></a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/%E6%81%A2%E5%A4%8D/">恢复<span class="tag-count">(1)</span></a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/reset/">reset<span class="tag-count">(1)</span></a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/git/">git<span class="tag-count">(1)</span></a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/IOS/">IOS<span class="tag-count">(1)</span></a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/%E5%BE%AE%E4%BF%A1%20Android%20%26amp%3Bamp/">微信 Android &amp;amp<span class="tag-count">(1)</span></a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/dongcanliang/tag/%E9%A1%B5%E9%9D%A2%E5%BA%95%E9%83%A8/">页面底部<span class="tag-count">(1)</span></a>
        </li>
    <li>
        <a href="https://www.cnblogs.com/dongcanliang/tag/">更多</a>
    </li>

</ul>
</div>

</div>

<!-- 积分与排名 -->


<!-- 随笔分类、随笔档案、文章分类、新闻分类、相册、链接 -->
<div id="sidebar_categories">

    <div class="catListPostCategory">
        <h3 class="catListTitle">
            
随笔分类



        </h3>

        <ul>
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/category/835229.html" rel="" target="">
    C/C++(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/category/704650.html" rel="" target="">
    HTML and CSS(6)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/category/835074.html" rel="" target="">
    java(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/category/704651.html" rel="" target="">
    JavaScript(15)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/category/919013.html" rel="" target="">
    nodejs(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/category/704648.html" rel="" target="">
    PHP(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/category/968976.html" rel="" target="">
    vue(3)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/category/765149.html" rel="" target="">
    Web(3)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/category/704653.html" rel="" target="">
    微信平台测试(1)
</a>
 

                </li>                
            
        </ul>
    </div>    
    <div class="catListPostArchive">
        <h3 class="catListTitle">
            
随笔档案



        </h3>

        <ul>
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2019/07.html" rel="" target="">
    2019年7月(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2018/04.html" rel="" target="">
    2018年4月(2)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2017/08.html" rel="" target="">
    2017年8月(2)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2017/06.html" rel="" target="">
    2017年6月(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2017/05.html" rel="" target="">
    2017年5月(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2017/04.html" rel="" target="">
    2017年4月(3)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2017/03.html" rel="" target="">
    2017年3月(3)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2016/12.html" rel="" target="">
    2016年12月(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2016/09.html" rel="" target="">
    2016年9月(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2016/08.html" rel="" target="">
    2016年8月(1)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2016/05.html" rel="" target="">
    2016年5月(3)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2015/12.html" rel="" target="">
    2015年12月(2)
</a>
 

                </li>                
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://www.cnblogs.com/dongcanliang/archive/2015/06.html" rel="" target="">
    2015年6月(1)
</a>
 

                </li>                
            
        </ul>
    </div>    
    <div class="catList">
        <h3 class="catListTitle">
            
github



        </h3>

        <ul>
                <li data-category-list-item-visible="true" style="display: block">
                    
<a href="https://github.com/dclcats" rel="nofollow noopener noreferrer" target="">
    GitHub
</a>
 

                </li>                
            
        </ul>
    </div>    
</div>

<!-- 最新评论 -->
<div id="sidebar_recentcomments" class="sidebar-block"><div class="catListComment">
<h3 class="catListTitle">最新评论</h3>

	<div class="RecentCommentBlock">
        <ul>
                    <li class="recent_comment_title"><a href="https://www.cnblogs.com/dongcanliang/p/7054176.html">1. Re:this 指向详细解析（箭头函数）</a></li>
                    <li class="recent_comment_body"><p>好文，智齿！</p>
</li>
                    <li class="recent_comment_author">--潘帕斯草原上的风</li>
                    <li class="recent_comment_title"><a href="https://www.cnblogs.com/dongcanliang/p/7054176.html">2. Re:this 指向详细解析（箭头函数）</a></li>
                    <li class="recent_comment_body"><p>好文章，用this串起来了好多知识，受教了感谢！</p>
</li>
                    <li class="recent_comment_author">--LV帅</li>
                    <li class="recent_comment_title"><a href="https://www.cnblogs.com/dongcanliang/p/7054176.html">3. Re:this 指向详细解析（箭头函数）</a></li>
                    <li class="recent_comment_body"><p>tql</p>
</li>
                    <li class="recent_comment_author">--JJSsnow</li>
                    <li class="recent_comment_title"><a href="https://www.cnblogs.com/dongcanliang/p/7307059.html">4. Re:移动端实现拖动操作</a></li>
                    <li class="recent_comment_body">@ 哎呦喂烦勒把垃圾桶内当作外边，把垃圾桶外当作里边就好了呀；把 `checkPos ` 函数中的条件语句的条件做一定调整即可...</li>
                    <li class="recent_comment_author">--Chris-dc</li>
                    <li class="recent_comment_title"><a href="https://www.cnblogs.com/dongcanliang/p/7307059.html">5. Re:移动端实现拖动操作</a></li>
                    <li class="recent_comment_body">请问博主，如果反着来怎么写，就是我的元素放到垃圾桶里，从垃圾桶拖出来进行删除，思路是什么</li>
                    <li class="recent_comment_author">--哎呦喂烦勒</li>
        </ul>
    </div>
</div>

</div>


<!-- 阅读排行榜 -->
<div id="sidebar_topviewedposts" class="sidebar-block"><div class="catListView">
<h3 class="catListTitle">阅读排行榜</h3>
	<div id="TopViewPostsBlock">
        <ul style="word-break:break-all">
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/7054176.html">
                            1. this 指向详细解析（箭头函数）(79103)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/11162235.html">
                            2. git reset --hard 操作后的数据恢复(23774)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/7383508.html">
                            3. 移动端页面输入底部被软键盘遮挡问题(8307)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/6770096.html">
                            4. 异步请求fetch之初体验(7096)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/6840139.html">
                            5. 安卓下微信内置浏览器视频出现解析错误(6031)
                        </a>
                    </li>
        </ul>
    </div>
</div>

</div>

<!-- 评论排行榜 -->
<div id="sidebar_topcommentedposts" class="sidebar-block"><div class="catListFeedback">
<h3 class="catListTitle">评论排行榜</h3>
	<div id="TopFeedbackPostsBlock">
        <ul style="word-break:break-all">
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/7054176.html">
                            1. this 指向详细解析（箭头函数）(5)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/7307059.html">
                            2. 移动端实现拖动操作(2)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/6655061.html">
                            3. 知乎日报 API的图片盗链问题(2)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/6134146.html">
                            4. 图片文件二进制编码合并与解析(2)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/dongcanliang/p/7383508.html">
                            5. 移动端页面输入底部被软键盘遮挡问题(1)
                        </a>
                    </li>
        </ul>
    </div>
</div>

</div>

<!-- 推荐排行榜 -->
<div id="sidebar_topdiggedposts" class="sidebar-block"><div id="topdigg_posts_wrap">
    <div class="catListView">
        <h3 class="catListTitle">推荐排行榜</h3>
        <div id="TopDiggPostsBlock">
            <ul style="word-break: break-all">
                        <li>
                            <a href="https://www.cnblogs.com/dongcanliang/p/7054176.html">
                                1. this 指向详细解析（箭头函数）(24)
                            </a>
                        </li>
                        <li>
                            <a href="https://www.cnblogs.com/dongcanliang/p/11162235.html">
                                2. git reset --hard 操作后的数据恢复(2)
                            </a>
                        </li>
                        <li>
                            <a href="https://www.cnblogs.com/dongcanliang/p/7383508.html">
                                3. 移动端页面输入底部被软键盘遮挡问题(1)
                            </a>
                        </li>
                        <li>
                            <a href="https://www.cnblogs.com/dongcanliang/p/6840139.html">
                                4. 安卓下微信内置浏览器视频出现解析错误(1)
                            </a>
                        </li>
                        <li>
                            <a href="https://www.cnblogs.com/dongcanliang/p/6770096.html">
                                5. 异步请求fetch之初体验(1)
                            </a>
                        </li>
            </ul>
        </div>
    </div>
</div></div></div>
                    <script>loadBlogSideColumn();</script>
			</div>
			
		</div><!--end: sideBarMain -->
	</div><!--end: sideBar 侧边栏容器 -->
	<div class="clear"></div>
	</div><!--end: main -->
	<div class="clear"></div>
	<div id="footer">
		<!--done-->
Copyright © 2021 Chris-dc
<br><span id="poweredby">Powered by .NET 5.0 on Kubernetes</span>



	</div><!--end: footer -->
</div><!--end: home 自定义的最大容器 -->


    

    <input type="hidden" id="antiforgery_token" value="CfDJ8NACB8VE9qlHm6Ujjqxvg5BTLR6gKPV95irl9NRiSTPAK_o56Tgjs3gU5v6eg1CsAd-S38N-F4kNi-3RBoJ7BLXUwSHkSiBKKaEGdlspOOQsm6aLO4jj1RCT4EdDpE6hX7wd4GcKx17-TRztZFVOvnw">


<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?97eeb974f308ed092b30ca9324b0b369";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script><script type="text/javascript">getFollowStatus('625f7e22-5f1a-e511-b908-9dcfd8948a71');</script></body></html>